Skip to main content

从 URL 输入到页面显示发生了什么？

  1. 输入地址

  2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

    • 浏览器缓存：浏览器会记录 DNS 一段时间，因此，只是第一个地方解析 DNS 请求；
    • 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的 DNS 查询缓存)；
    • 路由器缓存：如果上述两个步骤均不能成功获取 DNS 记录，继续搜索路由器缓存；
    • ISP 缓存：若上述均失败，继续向 ISP 搜索。

  3. 浏览器根据域名，进行 DNS 域名解析:浏览器向 DNS 服务器发起请求，解析该 URL 中的域名对应的 IP 地址。

  4. 建立 TCP 连接：:解析出 IP 地址后，根据 IP 地址和默认 80 端口，和服务器建立 TCP 连接

  5. 发起 HTTP 请求：浏览器发起读取文件的 HTTP 请求（三次握手）

    a. 浏览器向服务器发送 TCP 数据：SYN b. 服务器向浏览器发送 TCP 数据：ACK SYN c. 浏览器向服务器发送 TCP 数据：ACK

  6. 服务器响应请求并返回结果

  7. 关闭 TCP 连接：（四次挥手）

    a. 浏览器向服务器发送 TCP 数据：FIN b. 服务器向浏览器发送 TCP 数据：ACK c. 服务器向浏览器发送 TCP 数据：FIN d. 浏览器向服务器发送 TCP 数据：ACK

  8. 浏览器渲染：浏览器解析 HTML 内容并渲染出来

    a. 解析 HTML，构建 DOM 树 b. 解析 CSS，构建 CSSOM 树 c. 构建 render 树:将 DOM 和 CSSOM 结合，并构建出渲染树 d. 计算节点的位置和几何结构 e. 绘制到屏幕上

  9. JS 引擎解析过程:调用 JS 引擎执行 JS 代码

    • 创建 window 对象
    • 加载文件
    • 预编译
    • 解释执行